'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReTab = require('./ReTab.jsx');
var Pager = require('../../components/pc/pager.jsx');
var HkfsFundDetailMessage = require('../../components/pc/HkfsFundDetailMessage.jsx');
var HomeProductContent = require('../../components/pc/HkfsHomeProductTable/HomeProductContent.jsx');
var actions = require('../../actions/fundDetail');
var LazyLoad=require('../../common/LazyLoad.js');


class HkfsFundDetail extends React.Component {
    constructor(props) {
        super(props);
        this.changePage=this.changePage.bind(this);
        this.renderRate=this.renderRate.bind(this);
        this.renderTransitionExplain=this.renderTransitionExplain.bind(this);
    }

    //渲染完成后添加异步加载
    componentDidMount(){
        var lazyLoad=new LazyLoad('/build','fundLineMap.bundle.js',0);
        lazyLoad.addLazy();
    }

    //换页
    changePage(current){
        this.props.dispatch(actions.getFundNavHisList(this.props.normalInfo.fundCode,current))
    }

    //交易说明书
    renderTransitionExplain(timeArry,confirmPaceArray,refundPaceArray){
        return timeArry.map((item,i)=>{
            return <div key={"TransitionExplainItem"+i} className="RateItem TransitionExplainItem"><div>{timeArry[i]}</div><div>{confirmPaceArray[i]}</div><div>{refundPaceArray[i]}</div></div>
        });
    }

    //费率
    renderRate(data,typeText){
        if(data) {
            return data.map((item, i)=> {
                if (i != data.length - 1)
                    return <div key={"RateItem"+i} className="RateItem">
                        <div className="RateItemTitle">
                            <span>{item.lowerLimit + item.limitUnit}</span><span>≤{typeText}&lt;</span><span>{item.upperLimit + item.limitUnit}</span>
                        </div>
                        <div className="RateItemValue">{item.feeRatio != null ? item.feeRatio : item.fixedFee}</div>
                    </div>
                else
                    return <div key={"RateItem"+i} className="RateItem">
                        <div className="RateItemTitle">
                            <span>{item.lowerLimit + item.limitUnit}</span><span>≤{typeText}</span></div>
                        <div className="RateItemValue">{item.feeRatio != null ? item.feeRatio : item.fixedFee}</div>
                    </div>
            })
        }
    }

    render() {
        let widthArray = ['25%', '25%', '25%', '25%'];
        let itemTitle = ['日期', '单位净值', '累计净值', '日涨跌幅'];
        let itemTypes = ['string', 'string', 'string', 'string'];
        return <div className="HkfsFundDetailContainer">
            <div className="HkfsFundDetailContent">
                <HkfsFundDetailMessage data={this.props.normalInfo}></HkfsFundDetailMessage>
                <div className="HkfsFundDetailMessage">
                    <ReTab itemWidth="200px" reClass="HkfsFundDetailTab">
                        <div reTabTitle="基金信息" className="HkfsFundInfo">
                            <div className="HkfsFundInfoTitle"><span
                                className="HkfsFundInfoItem bolder">基本信息</span><span className="HkfsFundInfoItem shortLeft">名称</span><span
                                className="HkfsFundInfoItem long">信息</span><span className="HkfsFundInfoItem"></span>
                            </div>
                            <div className="HkfsFundDetailMessageContent">
                                <div><span className="HkfsFundInfoItem middle">基金名称</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.fundFullName}</span></div>
                                <div><span className="HkfsFundInfoItem middle">基金代码</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.fundCode}</span></div>
                                <div><span className="HkfsFundInfoItem middle">基金类型</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.fundType}</span></div>
                                <div><span className="HkfsFundInfoItem middle">管理人</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.fundCorp}</span></div>
                                <div><span className="HkfsFundInfoItem middle">托管人</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.trustee}</span></div>
                                <div><span className="HkfsFundInfoItem middle">注册登记机构</span><span
                                    className="HkfsFundInfoItem short"></span><span
                                    className="HkfsFundInfoItem long">{this.props.normalInfo.fundName}</span></div>
                            </div>

                            <div className="HkfsFundInfoTitle"><span className="HkfsFundInfoItem bolder">业绩排名</span><span className="HkfsFundInfoItem shortLeft">期限</span><span className="HkfsFundInfoItem left">同类排名</span><span className="HkfsFundInfoItem left">排名变动</span><span className="HkfsFundInfoItem left">涨跌</span></div>
                            <div className="HkfsFundDetailMessageContent">
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">最近一周</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneWeek.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneWeek.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneWeek.avgReturn}</span></div>
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">最近一月</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneMonth.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneMonth.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneMonth.avgReturn}</span></div>
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">最近三月</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.quarter.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.quarter.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.quarter.avgReturn}</span></div>
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">最近半年</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.halfYear.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.halfYear.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.halfYear.avgReturn}</span></div>
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">最近一年</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneYear.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneYear.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.oneYear.avgReturn}</span></div>
                            <div><span className="HkfsFundInfoItem bolder"></span><span className="HkfsFundInfoItem shortLeft">今年以来</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.thisYear.rank}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.thisYear.rankChange}</span><span className="HkfsFundInfoItem left">{this.props.fundPerformance.thisYear.avgReturn}</span></div>
                            </div>
                        </div>
                        <div reTabTitle="净值数据" className="HkfsFundHisList">

                            <HomeProductContent reClass="HkfsFundHisListContent"
                                                data={this.props.fundNavHislist.list} widthArray={widthArray} title={itemTitle}
                                                itemTypes={itemTypes}></HomeProductContent>
                            <div className="PagerDiv">
                                <Pager page={this.props.fundNavHislist.page} totalPage={this.props.fundNavHislist.totalPage} onChangePage={this.changePage}/>
                            </div>
                        </div>
                        <div reTabTitle="交易费率" className="HkfsFundTransition">
                            <div className="HkfsFundTransitionTitle">
                                <div className="HkfsFundTransitionTitleImg"></div>
                                <div className="HkfsFundTransitionTitleText">前端认购</div>
                            </div>
                            <div className="HkHkfsFundTransitionContent">
                                {this.renderRate(this.props.normalInfo.subscribeRate,'认购金额')}
                            </div>

                            <div className="HkfsFundTransitionTitle">
                                <div className="HkfsFundTransitionTitleImg"></div>
                                <div className="HkfsFundTransitionTitleText">前端申购</div>
                            </div>
                            <div className="HkHkfsFundTransitionContent">
                                {this.renderRate(this.props.normalInfo.allotRate,'认购金额')}
                            </div>

                            <div className="HkfsFundTransitionTitle">
                                <div className="HkfsFundTransitionTitleImg"></div>
                                <div className="HkfsFundTransitionTitleText">赎回</div>
                            </div>
                            <div className="HkHkfsFundTransitionContent">
                                {this.renderRate(this.props.normalInfo.redeemRate,'持有期限')}
                            </div>

                            <div className="HkfsFundTransitionTitle">
                                <div className="HkfsFundTransitionTitleImg"></div>
                                <div className="HkfsFundTransitionTitleText">运作费率</div>
                            </div>
                            <div className="HkHkfsFundTransitionContent">
                                <div className="RateItem"><div className="RateItemTitle">管理费</div><div className="RateItemValue">{this.props.normalInfo.managerRate}</div></div>
                                <div className="RateItem"><div className="RateItemTitle">管理费</div><div className="RateItemValue">{this.props.normalInfo.trusteeRate}</div></div>
                            </div>

                            <div className="HkfsFundTransitionTitle">
                                <div className="HkfsFundTransitionTitleImg"></div>
                                <div className="HkfsFundTransitionTitleText">交易说明书</div>
                            </div>
                            <div className="HkHkfsFundTransitionContent">
                                <div className="RateItem TransitionExplainItem TransitionExplainItemTitle"><div>交易申请时间</div><div>申购确认（T+1）</div><div>赎回到账（T+3）</div></div>
                                {this.renderTransitionExplain(this.props.normalInfo.transactionTime,this.props.normalInfo.confirmPaceArray,this.props.normalInfo.refundPaceArray)}
                            </div>
                        </div>
                    </ReTab>
                </div>
            </div>
        </div>
    }
}

function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.fundDetail);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsFundDetail);